<template>
    <view class="content">
        <uni-nav-bar title="Pinia状态管理示例" fixed placeholder></uni-nav-bar>

        <view class="container">
            <uni-section title="计数器示例" type="line">
                <view class="counter-container">
                    <view class="counter-display">
                        <text class="count-text">当前计数: {{ counter.count }}</text>
                        <text class="double-count-text">双倍计数: {{ counter.doubleCount }}</text>
                    </view>

                    <view class="button-group">
                        <button type="primary" @click="increment">增加</button>
                        <button type="warn" @click="decrement">减少</button>
                        <button type="default" @click="reset">重置</button>
                    </view>
                </view>
            </uni-section>

            <uni-section title="说明" type="line">
                <view class="description">
                    <text>这是一个展示 Pinia 状态管理的示例页面：</text>
                    <text>\n1. 使用 useCounterStore() 获取状态</text>
                    <text>\n2. 通过 getters 计算双倍计数</text>
                    <text>\n3. 通过 actions 修改状态</text>
                    <text>\n4. 状态会在页面刷新后保持</text>
                </view>
            </uni-section>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { useCounterStore } from '@/stores/counter.js'
// 导入uni-ui组件
import uniNavBar from '@dcloudio/uni-ui/lib/uni-nav-bar/uni-nav-bar.vue'
import uniSection from '@dcloudio/uni-ui/lib/uni-section/uni-section.vue'

// 获取计数器状态
const counter = useCounterStore()

// 方法
const increment = () => {
    counter.increment()
}

const decrement = () => {
    counter.decrement()
}

const reset = () => {
    counter.count = 0
}
</script>

<style scoped>
.content {
    padding: 20rpx;
}

.container {
    padding-top: var(--status-bar-height);
}

.counter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 0;
}

.counter-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40rpx;
}

.count-text {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
}

.double-count-text {
    font-size: 28rpx;
    color: #666;
}

.button-group {
    display: flex;
    gap: 20rpx;
}

.button-group button {
    margin: 0;
}

.description {
    padding: 20rpx;
    font-size: 28rpx;
    line-height: 1.6;
    color: #333;
}
</style>